<script setup>
import { ref, computed } from "vue";
import { useUserStore } from '/src/store/userStore.js';
import { useRouter } from 'vue-router';

const userStore = useUserStore();
const router = useRouter();

// 如果未登录，重定向到登录页
if (!userStore.isLoggedIn) {
  router.push('/user/login');
}
const user = {
  username: 'admin',
  gender: '男',
  post: '软件工程师',
  sign: '这个人很懒，什么也没留下',
};
const activeIndex = ref("1")
const myArticleList = ref([
{ id: 1, title: "vue3.0新特性使用攻略", url: "article1.html" },
        { id: 2, title: "vue脚手架使用详解", url: "article2.html" },
        { id: 3, title: "Element Plus组件库使用指南", url: "article3.html" },
])

const articleList = ref([])

const myCourseList = ref([
        { id: 1, title: "零基础学JavaScript", url: "course1.html" },
        { id: 2, title: "Vue3.0从入门到精通", url: "course2.html" },
        { id: 3, title: "Element Plus组件库实战", url: "course3.html" },
      ],)

const myProductList = ref([])
</script>

<template>
  <div id="app">
      <el-container>
      <el-container>
      <el-aside>
        <el-card>
        <el-menu default-active="activeIndex">
            <el-menu-item index="1">个人中心</el-menu-item>
            <el-menu-item index="2">我的文章</el-menu-item>
            <el-menu-item index="3">我的课程</el-menu-item>
            <el-menu-item index="4">我的订单</el-menu-item>
            <el-menu-item index="5">我的收藏</el-menu-item>
            <router-link to="/user/list"><el-menu-item index="6">我的关注</el-menu-item></router-link>
            <router-link to="/user/list"><el-menu-item index="6">我的粉丝</el-menu-item></router-link>
        </el-menu>
       </el-card> 
      </el-aside>
        <el-main>
          <el-card>
            <el-row>
                <el-col :span="4">
                    <img src="/images/avatar.png" style="width: 100px; height: 100px; border-radius: 50%;"/>
                </el-col>
                <el-col :span="20">
                    <h2>{{user.username}}</h2>
                    <p>性别:{{user.gender}}</p>
                    <p>签名档:{{user.sign}}</p>
                </el-col>
            </el-row>
          </el-card>
          <el-card>
            <el-tabs>
                <el-tab-pane label="我发布的文章">
                    <div v-if="myArticleList.length > 0">
                        <el-list v-for="article in myArticleList" :key="article.id">
                          <el-list-item>
                            <p><el-link :href="article.url">{{ article.title }}</el-link></p>
                          </el-list-item>
                        </el-list>
                      </div>
                    <el-empty v-else description="暂无数据"/>
                </el-tab-pane>
                <el-tab-pane label="我收藏的文章">
                    <div v-if="myArticleList.length > 0">
                        <el-list v-for="article in myArticleList" :key="article.id">
                          <el-list-item>
                            <p><el-link :href="article.url">{{ article.title }}</el-link></p>
                          </el-list-item>
                        </el-list>
                      </div>
                    <el-empty v-else description="暂无数据"/>
                </el-tab-pane>
                <el-tab-pane label="我发布的课程">
                    <div v-if="myCourseList.length > 0">
                        <el-list v-for="course in myCourseList" :key="course.id">
                          <el-list-item>
                            <p><el-link :href="course.url">{{ course.title }}</el-link></p>
                          </el-list-item>
                        </el-list>
                      </div>
                    <el-empty v-else description="暂无数据"/>
                </el-tab-pane>
                <el-tab-pane label="我收藏的课程">
                    <div v-if="myCourseList.length > 0">
                        <el-list v-for="course in myCourseList" :key="course.id">
                          <el-list-item>
                           <p><el-link :href="course.url">{{ course.title }}</el-link></p>
                          </el-list-item>
                        </el-list>
                      </div>
                    <el-empty v-else description="暂无数据"/>
                </el-tab-pane>
                <el-tab-pane label="我收藏的商品">
                    <div v-if="myProductList.length > 0">
                        <el-list v-for="product in myProductList" :key="product.id">
                          <el-list-item>
                            <p><el-link :href="product.url">{{ product.title }}</el-link></p>
                          </el-list-item>
                        </el-list>
                      </div>
                    <el-empty v-else description="暂无数据"/>
                </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-main>
      </el-container>
      </el-container>
    </div>
</template>

<style scoped>
</style>
